Selector - pricing tables and plans

Introduction

  • Item Name : Selector - pricing tables and plans
  • Item Version : v 2.0
  • Author : Ashish Maraviya
  • Copyright : 2020

First of all, Thank you so much for purchasing this 'Selector template' and for being my loyal customer. You are awesome! You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this item. You may learn basics here and here.

Getting Started

Requirements

You will need the following sofwares to customize the pricing tables.

  1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
Note : Be careful while editing the item. If not edited properly, the design layout may break completely.

Include Files

  • HTML
  • CSS
  • JS

Bootstrap (v4.3.1) Grid System

If you want to use three column of pricing tables

<div class="container">										
	<div class="row">										
		<div class="col-lg-4  col-md-6">
			YOUR CODES GOES HERE
		</div>
	</div>
</div>

If you want to use four column of pricing tables

<div class="container-fluid">										
	<div class="row">										
		<div class="col-lg-3  col-md-6  col-12">
			YOUR CODES GOES HERE
		</div>
	</div>
</div>

Customization

HTML File Customization

You can open index.html file in code editer software. Copy all code(Pricing table style which you want) and paste in your website

<!-- Single Plan -->
<div class="col-lg-4 col-md-6">
	
	<div class="plan-style-1 plan-style-1-bg-blue">
		<form>
			<!-- Plan Head -->
			<div class="plan-header">
				<h3 class="plan-title">Basic</h3>
				<!-- Plan Price -->
				<div class="plan-price">
					<p class="price"><span>$</span><span class="big-plan-price" id="basic_price"></span><span>/ M</span></p>
				</div>
			</div>
			<!-- Plan List -->
			<ul class="plan-list">
				<li>
					<label class="checkbox-lable">10gb
						<span class="tooltip-info">
							<span class="tooltip-hover-text">Storage</span>
							<span class="tooltiptext">10gb storage per month</span>
						</span>
						<span class="one_price">$1</span>
						<input type="checkbox" class="checkbox_basic_1" checked="checked" id="storage_1" name="checkbox_basic_1" value="1">
						<span class="checkmark"></span>
					</label>
				</li>
				<li>
					<label class="checkbox-lable">20GB Bandwidth
						<span class="one_price">$2</span>
						<input type="checkbox" class="checkbox_basic_1" checked="checked" id="bandwidth_1" name="checkbox_basic_1" value="2">
						<span class="checkmark"></span>
					</label>
				</li>
				<li>
					<label class="checkbox-lable">1 SQL Database
						<span class="one_price">$6</span>
						<input type="checkbox" class="checkbox_basic_1" checked="checked" id="database_1" name="checkbox_basic_1" value="6">
						<span class="checkmark"></span>
					</label>
				</li>
				<li>
					<label class="checkbox-lable">5 Email Account
						<span class="one_price">$1</span>
						<input type="checkbox" class="checkbox_basic_1" checked="checked" id="email_1" name="checkbox_basic_1" value="1">
						<span class="checkmark"></span>
					</label>
				</li>
				<li>
					<label class="checkbox-lable">1 Website 
						<span class="tooltip-info">
							<span class="tooltip-hover-text">Domain</span>
							<span class="tooltiptext">1 Website Domain Available</span>
						</span>
						<span class="one_price">$2</span>
						<input type="checkbox" class="checkbox_basic_1" id="domain_1" name="checkbox_basic_1" value="2">
						<span class="checkmark"></span>
					</label>
				</li>
				<li>
					<label class="checkbox-lable">24/7 Support
						<span class="one_price">$1</span>
						<input type="checkbox" class="checkbox_basic_1" id="support_1" name="checkbox_basic_1" value="1">
						<span class="checkmark"></span>
					</label>
				</li>
			</ul>
			<!-- Plan Bottom -->
			<div class="plan-bottom">
				<a class="plan-button" href="#" id="basicSignup_1">Signup Now</a>
			</div>
		</form>
	</div>
	
</div>
<!-- End Single Plan-->

Main CSS File Customization

You can go to css folder and open "pricing-tables.css" file in code editer software. Copy all code(Pricing table style which you want) and paste in your website

/* Start Pricing plan style 1 */
.plan-style-1{
    margin: auto;
	overflow: hidden;
    position: relative;
	text-align: center;
	box-shadow: 0px 0px 30px #eee;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.plan-style-1-bg-blue {
	background: linear-gradient(135deg, #35a1cd, #4258c6, #35a1cd);
	box-shadow: 0px 0px 30px #35a1cd;
	background-size: 300% 175%;
}
.plan-style-1-bg-blue:hover {
	background-position: bottom;
}
.plan-style-1-bg-pink {
	background: linear-gradient(135deg, #fb6a44, #fa2b7f, #fb6a44);
	background-size: 300% 175%;
	box-shadow: 0px 0px 30px #fb6a44;
	
}
.plan-style-1-bg-pink:hover {
	background-position: bottom;
}
.plan-style-1-bg-purple {
	background: linear-gradient(135deg, #70439c, #431b6b, #70439c);
	background-size: 300% 175%;
	box-shadow: 0px 0px 30px #70439c;
	
}
.plan-style-1-bg-purple:hover {
	background-position: bottom;
}
.plan-style-1 .plan-header{
    margin: 30px 30px 0 30px;
    padding: 30px 0 20px 0;
	position: relative;
	border: 2px solid #fff;
}
.plan-style-1 .plan-header:after{
	content: "";
    display: block;
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
}
.plan-style-1 .plan-header .plan-title{
	margin: -30px 0 26px 0;
	color: #f7f7f7;
	line-height: 40px;
    font-size: 20px;
	font-weight: 400;
	background-color: rgba(255, 255, 255, .2);
}
.plan-style-1 .plan-price .price {
	margin-bottom: 5px;
}
.plan-style-1 .plan-price .price .big-plan-price{
	margin: 0;
	font-size: 55px;
    font-weight: 900;
	line-height: 46px;
    color: #fff;
}
.plan-style-1 .plan-price .price span{
	padding: 0 5px;
	font-size: 16px;
    font-weight: 400;
    color: #fff;
}
.plan-style-1 .plan-list{
    padding: 30px 0 20px 0;
    margin-bottom: 0;
	position: relative;
	z-index: 1;
}
.plan-style-1 .plan-list li{
    margin: 0 30px;
	position: relative;
    list-style-type: none;
    color: #ececec;
    line-height: 35px;
    font-size: 14px;
    font-weight: 400;
	text-align: left;
    letter-spacing: 0.02rem;
}
.plan-style-1 .plan-list li .one_price {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    float: right;
    opacity: 0.7;
}
.plan-style-1 .plan-list li i{
    margin-right: 5px;
    position: relative;
    font-size: 13px;
    line-height: 42px;
}
.plan-style-1 .plan-list li i.far.fa-times-circle{
	color: red;
}
.plan-style-1 .plan-list .tooltip-info{
	cursor: pointer;
}
.plan-style-1 .plan-list .tooltip-hover-text{
	color: #fff;
	font-weight: 600;
	border-bottom: 1px dotted #fff;
}
.plan-style-1 .tooltip-info .tooltiptext{
	visibility: hidden;
	width: 150px;
	background-color: #fff;
	font-size: 12px;
	letter-spacing: 0.02rem;
	color: #444;
	text-align: center;
	line-height: 20px;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 2;
	bottom: 43px;
    left: 45%;
	margin-left: -60px;
	border: 1px solid #fff;
}
.plan-style-1 .tooltip-info .tooltiptext::after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #fff transparent transparent transparent;
}
.plan-style-1 .tooltip-info:hover .tooltiptext{
	visibility: visible;
}
.plan-style-1 .plan-bottom{
	padding: 8px 0 40px 0;
	position:relative;
	overflow:hidden;
}
.plan-style-1 .plan-button{
    padding: 10px 20px;
	font-size: 14px;
    color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	background-size: 300% 100%;
	border: 2px solid #fff;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.plan-style-1 .plan-button:hover{
	background-position: 100% 0;
	background-color: #fff;
    color: #444;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.plan-style-1 .checkbox-lable {
	display: block;
	position: relative;
	padding: 2px 10px 2px 40px;
	margin-bottom: 10px;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.08);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.plan-style-1 .checkbox-lable:hover {
	background-color: rgba(255, 255, 255, 0.2);
}
.plan-style-1 .checkbox-lable:hover .checkmark {
	background-color: rgba(0, 0, 0, 0.3) !important;
}
.plan-style-1 .checkbox-lable:hover input ~ .checkmark:after {
	color: red !important;
}
.plan-style-1 .checkbox-lable input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.plan-style-1 .checkmark {
	position: absolute;
	top: 9px;
	left: 10px;
	height: 21px;
	width: 21px;
	border: 2px solid #fff;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.plan-style-1 .checkbox-lable:hover input ~ .checkmark {
	background-color: #ccc;
}
.plan-style-1 .checkbox-lable input:checked ~ .checkmark {
	background-color: transparent;
    
}
.plan-style-1 .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
.plan-style-1 .checkbox-lable input:checked ~ .checkmark:after {
	display: block;
}
.plan-style-1 .checkbox-lable .checkmark:after {
	left: 6px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/* End Pricing plan style 1 */

Responsive CSS File Customization

You can go to css folder and open pricing-tables-responsive.css file in code editer software. Copy all code(style which you want) and paste in your website

@media only screen and (max-width: 991px) {
	.section-bg {
		background-color: #f6f6f6;
	}
	.plan-tables-5 .detail-block {
		display: none;
	}
	.plan-style-5 .plan-list li p {
		display: block;
	}
	.plan-style-5 .tooltip-info .tooltiptext {
		bottom: 95%;
	}
	.plan-tables-1 > div:nth-last-child(-n + 1), .plan-tables-2 > div:nth-last-child(-n + 1), .plan-tables-4 > div:nth-last-child(-n + 1) {
	    margin: 30px auto auto auto;
	}
	.plan-tables-3 > div:nth-last-child(-n + 1) {
		margin: 48px auto auto auto;
	}
	.plan-style-3.blue-shadow {
		box-shadow: 0px 0px 30px -10px #0652DD;
	}
	.plan-style-3.green-shadow {
		box-shadow: 0px 0px 30px -10px #02d639;
	}
	.plan-style-5 {
		border: 1px solid #eee;
	}
}
@media only screen and (max-width: 767px) {
	.plan-padding {
		padding: 0 15px;
	}

	.plan-style-1, .plan-style-2, .plan-style-3, .plan-style-4{
		max-width: 400px;
	}
	.plan-style-1 .plan-price .price {
		font-size: 50px;
	}
	.plan-style-1 .plan-header .plan-title {
		margin: -30px 0 14px 0;
	}
	.plan-style-1 .plan-price .price {
		margin-bottom: -6px;
	}
	.plan-tables-1 > div:nth-last-child(-n + 2), .plan-tables-2 > div:nth-last-child(-n + 2), .plan-tables-4 > div:nth-last-child(-n + 2) {
	    margin: 30px auto auto auto;
	}
	.plan-tables-3 > div:nth-last-child(-n + 2) {
		margin: 48px auto auto auto;
	}
	.plan-tables-5 > div:nth-last-child(-n + 2) {
	    margin: 30px 0 0 0;
	}
}
@media only screen and (max-width: 576px) {
	.plan-style-1, .plan-style-2, .plan-style-3, .plan-style-4 {
		max-width: 350px;
	}
	.plan-tables-5 > div:nth-last-child(-n + 3) {
	    margin: 30px 0 0 0;
	}
	.plan-style-1 .plan-price .price {
		font-size: 48px;
	}
	.plan-style-5 {
		max-width: 350px;
		margin: auto !important;
	}
}

JS File Customization

You can go to js folder and open 'plan-1-main.js' file in code editer software. Copy all code(js which you want) and paste in your website js file.

'use strict';

$(document).ready(function(){
	
	//Design 1 (plan-1 script)
	var TotalBasic = 0;
	
	$('.checkbox_basic_1').parent().find('span.one_price').addClass('txt-light');
	$('input:checkbox[name=checkbox_basic_1]:checked').each(function(){
		TotalBasic = TotalBasic + parseInt($(this).val());
		$(this).parent().find('span.one_price').removeClass('txt-light');
	});
	$('#basic_price').html(TotalBasic);		
	
	$('.checkbox_basic_1').on('click', function() {
		var currentvalue = $(this).val();
		
		if (!$(this).is(':checked')) {
			$(this).parent().find('span.one_price').addClass('txt-light');	
			TotalBasic = TotalBasic - parseInt(currentvalue);
			}else{
			$(this).parent().find('span.one_price').removeClass('txt-light');
			TotalBasic = TotalBasic + parseInt(currentvalue);
		}
		
		$('#basic_price').html(TotalBasic);
		
		if(TotalBasic > 0){
			$("#basicSignup_1").removeClass('btn-disable');
			$('#basicSignup_1').unbind('click');
		}else{
			$("#basicSignup_1").addClass('btn-disable');
			$('#basicSignup_1').bind('click', false);
		}
	});
	
	//Design 1 (plan-2 script)
	var TotalStanderd = 0;
	
	$('.checkbox_standerd_1').parent().find('span.one_price').addClass('txt-light');
	$('input:checkbox[name=checkbox_standerd_1]:checked').each(function(){
		TotalStanderd = TotalStanderd + parseInt($(this).val());
		$(this).parent().find('span.one_price').removeClass('txt-light');
	});
	$('#standard_price').html(TotalStanderd);		
	
	$('.checkbox_standerd_1').on('click', function() {
		var currentvalue = $(this).val();
		
		if (!$(this).is(':checked')) {
			$(this).parent().find('span.one_price').addClass('txt-light');	
			TotalStanderd = TotalStanderd - parseInt(currentvalue);
			}else{
			$(this).parent().find('span.one_price').removeClass('txt-light');
			TotalStanderd = TotalStanderd + parseInt(currentvalue);
		}
		
		$('#standard_price').html(TotalStanderd);
		
		if(TotalStanderd > 0){
			$("#standardSignup_1").removeClass('btn-disable');
			$('#standardSignup_1').unbind('click');
		}else{
			$("#standardSignup_1").addClass('btn-disable');
			$('#standardSignup_1').bind('click', false);
		}
	});
	
	//Design 1 (plan-3 script)
	var TotalPremium = 0;
	
	$('.checkbox_premium_1').parent().find('span.one_price').addClass('txt-light');
	$('input:checkbox[name=checkbox_premium_1]:checked').each(function(){
		TotalPremium = TotalPremium + parseInt($(this).val());
		$(this).parent().find('span.one_price').removeClass('txt-light');
	});
	$('#premium_price').html(TotalPremium);		
	
	$('.checkbox_premium_1').on('click', function() {
		var currentvalue = $(this).val();
		
		if (!$(this).is(':checked')) {
			$(this).parent().find('span.one_price').addClass('txt-light');	
			TotalPremium = TotalPremium - parseInt(currentvalue);
			}else{
			$(this).parent().find('span.one_price').removeClass('txt-light');
			TotalPremium = TotalPremium + parseInt(currentvalue);
		}
		
		$('#premium_price').html(TotalPremium);
		
		if(TotalPremium > 0){
			$("#premiumSignup_1").removeClass('btn-disable');
			$('#premiumSignup_1').unbind('click');
		}else{
			$("#premiumSignup_1").addClass('btn-disable');
			$('#premiumSignup_1').bind('click', false);
		}
	});
});

Custom Colors

All pricing tables use gradient colors.

background: linear-gradient(135deg, #35a1cd, #4258c6, #35a1cd);

For example : you can change color red and green. to use like this linear-gradient(135deg, red, green, red);

Hex Code

For example : you can change color #FF0000 and #008000. to use like this linear-gradient(135deg, #FF0000, #008000, #FF0000);

#35a1cd color replace with #FF0000 color code in all places.

#4258c6 color replace with #008000 color code in all places.

Thank You

Thank you again for download pricing tables, enjoy it and give us ratting.